<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>

    <!-- 轮播图 -->
    <div class="lbt">
      <!-- <img src="@/assets/imgs/swiper1.jpg" alt=""> -->
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="@/assets/imgs/swiper1.jpg" alt />
        </swiper-slide>
        <swiper-slide style="background:green;">Slide 2</swiper-slide>
        <swiper-slide>
          <img src="@/assets/imgs/swiper1.jpg" alt />
        </swiper-slide>
        <swiper-slide style="background:red;">Slide 4</swiper-slide>
        <swiper-slide>
          <img src="@/assets/imgs/swiper1.jpg" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

    <!-- 宫格 -->
    <div class="navs">
      <div class="nav">
        <img src="@/assets/imgs/icon-qiandao.png" />
        <span>签到</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fujin.png" />
        <span>附近</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-zhanhui.png" />
        <span>旅展</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fuli.png" />
        <span>福利</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-muma.png" />
        <span>玩乐</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-xingxing.png" />
        <span>周边</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-tiyu.png" />
        <span>体育</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-qinzi.png" />
        <span>亲子</span>
      </div>
    </div>

    <!-- 热卖商品 -->
    <div class="hotGoods">
      <div class="tit">热卖商品</div>
      <div class="main">

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" alt />
          </div>
          <div class="r">
            <div class="name">徐人龙</div>
            <div class="address">窑子</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" alt />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" alt />
          </div>
          <div class="r">
            <div class="name">徐人龙</div>
            <div class="address">窑子</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" alt />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" alt />
          </div>
          <div class="r">
            <div class="name">徐人龙</div>
            <div class="address">窑子</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" alt />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" alt />
          </div>
          <div class="r">
            <div class="name">徐人龙</div>
            <div class="address">窑子</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" alt />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" alt />
          </div>
          <div class="r">
            <div class="name">徐人龙</div>
            <div class="address">窑子</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" alt />
        </div>

      </div>
    </div>
  </div>
</template>

<script>
//导入组件
import Header from "@/components/Header";
//导出组件
export default {
  components: {
    Header
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        }
        // Some Swiper option/callback...
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(3, 1000, false);
  }
};
</script>

<style lang="scss" scpoed>
@import "@/assets/css/common.scss";
.home {
  width: 100%;
  height: 100%;
  background: #ccc;
  .lbt {
    width: 100%;
    height: px2rem(150);
    overflow: hidden;
    .swiper-container,
    .swipwer-slide {
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  .navs {
    width: 100%;
    height: px2rem(174);
    background: #ccc;
    display: flex;
    flex-wrap: wrap;

    .nav {
      width: 25%;
      height: px2rem(87);
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        margin-top: px2rem(10);
      }
      img {
        width: px2rem(40);
        height: px2rem(40);
      }
    }
  }

  .hotGoods {
    width: 100%;
    min-height: px2rem(100);
    background: blue;
    .tlt {
      padding-left: px2rem(10);
      border: solid px2rem(1) #ccc;
    }
    .main {
      .goods {
        display: flex;
        background: green;
        padding: px2rem(10) px2rem(10);
        border: solid px2rem(1) #ccc;
        position: relative;
        .cart {
          width: px2rem(25);
          height: px2rem(25);
          position: absolute;
          right: px2rem(10);
          bottom: px2rem(10);
        }
        .l {
          width: px2rem(80);
          height: px2rem(80);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .r {
          flex: 1;
          background: yellow;
        }
      }
    }
  }
}
</style>
